<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 12:36:26
 * @LastEditors: LAPTOP-CC091CC3
 * @LastEditTime: 2021-08-06 15:53:24
-->
<template>
  <div class="home">
    <Head></Head>
    <div class="header"></div>
    <div class="content">
      <div class="wrapper">
        <div class="carousel">
          <el-carousel>
            <el-carousel-item v-for="item in carousels" :key="item.id">
              <img :src="item.url" alt="" />
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="righttext">
          <h2>
            <router-link to="/article?id=83">
            
            [新征程开局“十四五”]加速织密交通网&nbsp;促经济惠民生           </router-link>
          </h2>
          <p>
            <a
              href="https://news.cctv.com/2021/08/06/ARTIe2TJBBN3COPzNuwq9YYH210806.shtml"
              target="_blank"
              >近日，国家市场监督管理总局公布《家用汽车产品修理更换退货责任规定》(以下简称新版《汽车三包规定》)，自2022年1月1日起施行。作为保护汽车消费者合法权益的一项具体规定，该规定一经发布便引发舆论热议。</a
            >
          </p>
          <div class="share">
            <a
              href="javascript:;"
              class="weixin"
              data-fx="wx-btn1"
              title="微信"
              data-spm-anchor-id="C94212.PnPr887gR6ub.EBlqp4fM1QR0.6"
              ><img src="../assets/微信.png"
            /></a>
            <a
              href="javascript:;"
              class="weibo"
              data-fx="wb-btn"
              title="新浪微博"
              data-spm-anchor-id="C94212.PnPr887gR6ub.EBlqp4fM1QR0.7"
              ><img src="../assets/新浪微博.png"
            /></a>
            <a
              href="javascript:;"
              class="qqzone"
              data-fx="qz-btn"
              title="QQ空间"
              data-spm-anchor-id="C94212.PnPr887gR6ub.EBlqp4fM1QR0.8"
              ><img src="../assets/QQ空间.png"
            /></a>
            <a
              href="javascript:;"
              class="qq"
              data-fx="qq-btn"
              title="QQ"
              data-spm-anchor-id="C94212.PnPr887gR6ub.EBlqp4fM1QR0.9"
              ><img src="../assets/QQ.png"
            /></a>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper2">
      <div class="xinwenlianbo">
        <center>
          <img src="http://121.199.28.60/123.png" alt="" width="80%" />
        </center>
        <div class="con">
          <div class="line topline"></div>
          <div class="line bottomline"></div>
        </div>
      </div>
    </div>
    <div class="wrapper3" v-loading="loading">
      <div class="wrapperhead">
        <div class="change">
          <span class="btn_left cur">
            <i></i>
            <a
              href="javascript:;"
              data-spm-anchor-id="C94212.PnPr887gR6ub.EJaHnJ2d9CJb.1"
              >列表浏览</a
            ></span
          >
          <span
            class="btn_right"
            data-spm-anchor-id="C94212.PnPr887gR6ub.EJaHnJ2d9CJb.i1"
          >
            <i>/</i>
            <a
              href="javascript:;"
              data-spm-anchor-id="C94212.PnPr887gR6ub.EJaHnJ2d9CJb.2"
              >卡片浏览</a
            ></span
          >
        </div>
        <div class="weather">
          <div class="data-a">
            <span class="time">2021年08月06日</span>
            <span class="location"><i></i>南京</span
            ><span class="weather">多云 33℃/26℃</span>
            <span class="weather_search"
              ><a
                href="http://weather.cntv.cn/"
                target="_blank"
                data-spm-anchor-id="C94212.PnPr887gR6ub.EJaHnJ2d9CJb.3"
                >天气查询&gt;</a
              ></span
            >
          </div>
        </div>
      </div>
    </div>
    <div class="listnews">
      <div class="leftimg">
        <img
          src="https://p3.img.cctvpic.com/photoworkspace/2021/08/06/2021080614085394634.jpg"
          alt=""
        />
      </div>
      <div class="newstitle">
        <h2>
          <router-link to="/article?id=84">
         墨西哥总统谴责多家在美武器商迎合犯罪集团需求
         </router-link>
        </h2>
        <p>
          <a
            href="https://news.cctv.com/2021/08/06/ARTIWRZ9IySdzoSKM3vQqN1u210806.shtml?spm=C94212.P4YnMod9m2uD.ENPMkWvfnaiV.193"
            target="_blank"
            >墨西哥总统洛佩斯5日谴责多家在美国的武器制造商迎合犯罪集团需求定制武器，且疏于管控武器交易。</a
          >
        </p>
      </div>
    </div>
    <Foot></Foot>
  </div>
</template>
  <script>
// import { get } from "../utils/request";
import Head from "./components/Head";
import Foot from "./components/Foot";
export default {
  // 4. 局部组件注册
  components: {
    Head,
    Foot,
  },
  // 1. 数据
  data() {
    return {
      carousels: [],
      loading: false,
      categoryArticles: [],
    };
  },
  // 2. 生命周期钩子函数 - 在vue的生命周期各个阶段会执行的代码
  created() {
    this.loadCarousels();
    this.loadCategoryArticles();
  },
  // 3. 方法，一般用来定义方法或者事件处理函数
  methods: {
    // 跳转
    toListHandler(category) {
      // 跳转
      this.$router.push({
        path: "/list",
        query: category,
      });
    },
    toArticleHandler(article) {
      this.$router.push({
        path: "/article",
        query: {
          id: article.id,
          name: article.category ? article.category.name : "",
        },
      });
    },
    // 加载轮播图数据
    loadCarousels() {
      let url = "/index/carousel/findAll";
      get(url).then((resp) => {
        this.carousels = resp.data;
      });
    },
    loadCategoryArticles() {
      this.loading = true;
      let url = "/index/article/findCategoryArticles";
      get(url).then((resp) => {
        this.categoryArticles = resp.data;
        this.loading = false;
      }),
        function () {
          var href = $(".xinwen18886_ind01 .list_con .silde")
            .eq(index)
            .attr("dataurl");
          var title = $(".xinwen18886_ind01 .list_con .silde")
            .eq(index)
            .find(".right_text h3 a")
            .text();
          var brief = $(".xinwen18886_ind01 .list_con .silde")
            .eq(index)
            .find(".right_text p a")
            .text();
          var shaimg = $(".xinwen18886_ind01 .list_con .silde")
            .eq(index)
            .find(".image img")
            .attr("src");
          if (href == undefined) {
            href = "http://news.cctv.com/";
          }
          shareObj.shareUrl = href;
          shareObj.shareTitle = title;
          shareObj.pic = "https://" + shaimg.split("//")[1];
          shareObj.summary = brief;
          if ($(this).hasClass("weixin")) {
            if (
              $(this).parents(".share").find(".ind01cntvshare_weixin").length >
              0
            ) {
              $(".ind01cntvshare_weixin").remove();
            } else {
              requireQrcode2(index, href);
            }
          }
        },
        function () {
          var u =
            "//service.weibo.com/share/share.php?appkey=2078561600&title=" +
            shareObj.shareTitle +
            "&url=" +
            encodeURIComponent(shareObj.shareUrl) +
            "&pic=" +
            shareObj.pic +
            "&searchPic=false&style=simple";
          window.open(u);
        },
        function () {
          if (!shareObj.desc || typeof shareObj.desc == "undefined") {
            shareObj.desc = "";
          }
          var u =
            "//sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=" +
            encodeURIComponent(shareObj.shareUrl) +
            "&summary=" +
            shareObj.summary +
            "&title=" +
            encodeURIComponent(shareObj.shareTitle) +
            "&pics=" +
            shareObj.pic +
            "&desc=" +
            shareObj.desc;
          window.open(u);
        },
        function () {
          if (!shareObj.desc || typeof shareObj.desc == "undefined") {
            shareObj.desc = "";
          }
          var u =
            "//connect.qq.com/widget/shareqq/index.html?url=" +
            encodeURIComponent(shareObj.shareUrl) +
            "&summary=" +
            shareObj.summary +
            "&title=" +
            encodeURIComponent(shareObj.shareTitle) +
            "&pics=" +
            shareObj.pic +
            "&desc=" +
            shareObj.desc;
          window.open(u);
        },
        function () {
          if ($(this).hasClass("cur")) {
          } else {
            $(this).addClass("cur").siblings().removeClass("cur");
            if ($(this).hasClass("btn_right")) {
              $(".xinwen18886_ind04 .con").addClass("kapian");
            } else {
              $(".xinwen18886_ind04 .con").removeClass("kapian");
            }
          }
        },
        function () {
          if ($(this).hasClass("cur")) {
          } else {
            $(this).addClass("cur").siblings().removeClass("cur");
            if ($(this).hasClass("btn_right")) {
              $(".xinwen18886_ind04 .con").addClass("kapian");
            } else {
              $(".xinwen18886_ind04 .con").removeClass("kapian");
            }
          }
        };
    },
  },
};
</script>
<style  lang="scss" scoped>
.home {
  .content {
    background: url(https://p4.img.cctvpic.com/photoAlbum/templet/common/DEPA1561603549108607/ind01_bg_XUQIU-18886.jpg)
      repeat-x left top;
    .wrapper {
      width: 85%;
      margin: 0 auto;

      min-height: 400px;
      display: flex;
      padding-top: 30px;
      padding-bottom: 30px;
      .carousel {
        float: left;
        width: 68%;
        background: url(https://p4.img.cctvpic.com/photoworkspace/2021/08/06/2021080604154332343.jpg);
        img {
          width: 100%;
          border: 0;
          margin: 0;
          padding: 0;
        }
      }
      .righttext {
        background: url(https://p4.img.cctvpic.com/photoAlbum/templet/common/DEPA1561603549108607/text_bg_XUQIU-18886.jpg);
        flex: 1;
        position: relative;
        color: #fff;
        float: right;
        border: 0;
        margin: 0;
        padding: 0;
        height: 450px;
      }
      .share {
        margin-top: 55px;
        display: flex;
        justify-content: space-around;
        img {
          height: 30px;
          width: 30px;
        }
      }
    }
  }
  .wrapper2 {
    background: url(https://p1.img.cctvpic.com/photoAlbum/templet/common/DEPA1561603549108607/ind02_bg_XUQIU-18886.jpg)
      no-repeat center top;
    width: 100%;
    margin: 0 auto;
    min-height: 400px;
    padding-top: 30px;
    padding-bottom: 30px;
    .xinwenlianbo {
      width: 85%;
      margin: 0 auto;

      min-height: 400px;
      display: flex;
      padding-top: 30px;
      padding-bottom: 0px;
    }
  }
  .wrapper3 {
    width: 100%;
    margin: 0 auto;

    height: 80px;
    display: flex;
    .wrapperhead {
      width: 85%;
      height: 80px;
      margin-top: 20px;
      margin-right: auto;
      margin-bottom: 20px;
      margin-left: auto;

      .change {
        color: red;
        display: block;
        width: 20%;

        height: 100%;

        float: left;
      }
      .weather {
        width: 35%;
        color: red;
        float: right;
        height: 100%;
      }
    }
  }
  .listnews {
    display: flex;
    width: 85%;
    padding: 20px;
    position: relative;
    background-color: #f3eaea;
    margin: 0 auto;
    margin-bottom: 50px;

    height: 240px;
    .leftimg {
      float: left;
      width: 30%;

      img {
        width: 100%;
        border: 0;

        padding: 0;
      }
    }
    .newstitle {
      flex: 1;

      float: right;
    }
  }
}
</style>